<template>
  <div class="app-container">
    <wise-crud
      ref="wise-crud"
      :urls="urls"
      :fields="fields"
      :handle="handle"
      :filters="filters"
      :data-fields="dataFields"
    >
      <template v-slot:handle="slotProps">
        
        <el-button
          v-if="slotProps.row.st === 1"
          type="danger"
          size="small"
          round
          @click.native.prevent="cleanAlarm(slotProps.row)"
        >消除告警</el-button>

        <el-button
          v-if="slotProps.row.st === 1"
          type="danger"
          size="small"
          round
          @click.native.prevent="deleteGj(slotProps.row)"
        >删除</el-button>
        <!-- <el-button
          type="danger"
          size="small"
          round
          @click.native.prevent="delLogs(slotProps.row.id)"
        >删除</el-button> -->
      </template>
    </wise-crud>
    <el-dialog title="告警记录" :visible.sync="dialogTableVisible">
      <el-table :data="dataList" border>
        <el-table-column
          property="deviceInfo.name"
          label="网关名称"
          width="100"
        />
        <el-table-column property="deveUi" label="网关编号" width="100" />
        <el-table-column property="deviceDataCode" label="数值类型" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.deviceDataCode === 'current'">
              <el-tag type="info">电流</el-tag>
            </template>
            <template v-if="scope.row.deviceDataCode === 'voltage'">
              <el-tag type="warning">电压</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column property="deviceValue" label="告警数值" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.deviceDataCode === 'current'">
              {{ scope.row.deviceValue }} A
            </template>
            <template v-if="scope.row.deviceDataCode === 'voltage'">
              {{ scope.row.deviceValue }} V
            </template>
          </template>
        </el-table-column>
        <el-table-column property="reason" label="告警原因" />
        <el-table-column property="alramTime" label="告警时间" width="120">
          <template slot-scope="scope">
            {{ scope.row.alramTime | dateFormat("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column property="alarmStatus" label="告警状态" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.alarmStatus === 980">
              <el-tag effect="dark" color="#FF1515">告警</el-tag>
            </template>
            <template v-if="scope.row.alarmStatus === 880">
              <el-tag effect="dark" color="#9B9B9B">离线</el-tag>
            </template>
            <template v-if="scope.row.alarmStatus === 780">
              <el-tag effect="dark" color="#F5A623">故障</el-tag>
            </template>
          </template>
        </el-table-column>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="ts"
            @current-change="getData"
          />
        </div>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import WiseCrud from '@/components/Crud/wiseCrud'
import { postHandle } from '../../../../api'
import { imgPath } from '../../../../filters'
export default {
  name: 'AlarmEvent',
  components: { WiseCrud },
  data() {
    return {
      urls: {
        list: '/api/v1/welder-sbtx-second/eq-alarm-comb/getList',
        add: '/api/v1/welder-sbtx-second/equipment-alarm/create',
        show: '/api/v1/welder-mw-second/monitor-alarm-record-comb/show-alarm-record/',
        update: '/api/v1/welder-sbtx-second/equipment-alarm/update/',
        delete: '/api/v1/welder-mw-second/monitor-alarm-record/remove/'
      },
      dataFields: [
        {
          name: 'userInfo' // 返回用户拥有的角色
        },
        {
          name: 'deviceInfo' // 返回用户拥有的角色
        },
        {
          name: 'disposeRecord'
        }
      ],
      handle: [''],
      fields: [
        { label: '序号', type: 'index', use: ['table'] },
        {
          label: '网关名称',
          prop: 'gateway.name',
          type: 'text',
          tableWidth: '120px',
          use: ['table']
        },
        {
          label: '网关编号',
          prop: 'did',
          type: 'text',
          tableWidth: '120px',
          use: ['table']
        },
        {
          label: '报警类型',
          prop: 'deviceDataCode',
          type: 'render',
          tableWidth: '100px',
          tableRender: (h, row, index) => {
            if (row.bjlx ===1001) {
              return h('el-tag', { props: { type: 'info' }}, '焊接电流')
            }
            if (row.bjlx ===1002) {
              return h('el-tag', { props: { type: 'info' }}, '焊接电压')
            }
            if (row.bjlx ===1003) {
              return h('el-tag', { props: { type: 'info' }}, '焊接速度')
            }
            if (row.bjlx ===1004) {
              return h('el-tag', { props: { type: 'info' }}, '气流量')
            }
            if (row.bjlx ===1005) {
              return h('el-tag', { props: { type: 'info' }}, '焊接温度')
            }
            if (row.bjlx ===2001) {
              return h('el-tag', { props: { type: 'info' }}, '风速')
            }
            if (row.bjlx ===2002) {
              return h('el-tag', { props: { type: 'info' }}, '温度')
            }
            if (row.bjlx ===2003) {
              return h('el-tag', { props: { type: 'info' }}, '湿度')
            }
            if (row.bjlx ===2004) {
              return h('el-tag', { props: { type: 'info' }}, '甲烷')
            }
            if (row.bjlx ===2005) {
              return h('el-tag', { props: { type: 'info' }}, '氧气')
            }
            if (row.bjlx ===2006) {
              return h('el-tag', { props: { type: 'info' }}, '一氧化碳')
            }
            if (row.bjlx ===2007) {
              return h('el-tag', { props: { type: 'info' }}, '硫化氢')
            }
            return h('div')
          },
          use: ['table']
        },
        {
          label: '告警数值',
          prop: 'sjvle',
         
         
          type: 'text',
          tableWidth: '120px',
          use: ['table']
        },
        {
          label: '告警原因',
          prop: 'reason',
          type: 'render',
          tableWidth: '200px',
          tableRender: (h, row, index) => {
           
              return h('el-tag', { props: { type: 'info' }}, '超出设定值'+row.sdvle2+'~'+ row.sdvle1)
           
           
           
          },
          use: ['table']
        },
        {
          label: '告警时间',
          prop: 'ct',
          type: 'datetime',
          tableWidth: '160px',
          format: 'YYYY-MM-DD HH:mm:ss',
          use: ['table']
        },
        {
          label: '告警状态',
          prop: 'alarmStatus',
          type: 'render',
          tableWidth: '100px',
          tableRender: (h, row, index) => {
            if (row.st === 1) {
              return h(
                'el-tag',
                { props: { effect: 'dark', color: '#FF1515' }},
                '告警'
              )
            } 
            if (row.st === 2) {
              return h(
                'el-tag',
                { props: { effect: 'dark', color: '#9B9B9B' }},
                '已处理'
              )
            }
           
            
          },
          use: ['table']
        },
        
        {
          label: '操作',
          type: 'handle',
          use: ['table'],
          handle: [],
          tableWidth: 200
        }
      ],
      dialogTableVisible: false,
      obj: {},
      dataList: [],
      page: {
        ps: 10,
        p: 1
      },
      ts: 0
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    },
    filters() {
      return [
        {
          field: 'spaceId',
          operator: 'EQUALS',
          value: this.$store.state.project.spaceId
        }
      ]
    }
  },
  methods: {
    showLogs(item) {
      this.obj = item
      this.getData()
      this.dialogTableVisible = true
    },
    getData() {
      postHandle(
        '/api/v1/welder-mw-second/monitor-device-alarm-log-comb/get-alarm-log-list',
        {
          d: {
            fields: [
              {
                name: 'deviceInfo' // 返回用户拥有的角色
              }
            ],
            filters: [
              { field: 'spaceId', operator: 'EQUALS', value: this.spaceId },
              {
                field: 'crcDataJointLabel',
                operator: 'EQUALS',
                value: this.obj.crcDataJointLabel
              },
              {
                field: 'deviceDataCode',
                operator: 'EQUALS',
                value: this.obj.deviceDataCode
              }
            ],
            page: this.page,
            retPage: true
          }
        }
      ).then((res) => {
        this.dataList = res.result
        this.ts = res.page.ts
      })
    },
    deleteGj(item) {
      this.$confirm('您确定要执行此操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postHandle(
          `/api/v1/welder-sbtx-second/eq-alarm/remove/${item.id}`
        ).then((res) => {
          this.$message('操作成功')
          this.$refs['wise-crud'].handleSearch()
        })
      })
    },
    
    cleanAlarm(item) {
      this.$confirm('您确定要执行此操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postHandle(
          `/api/v1/welder-sbtx-second/eq-alarm-comb/xcgj/${item.id}`
        ).then((res) => {
          this.$message('操作成功')
          this.$refs['wise-crud'].handleSearch()
        })
      })
    },
    delLogs(id) {
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.delrow(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    delrow(id) {
      postHandle(this.urls.delete + id, {}).then((res) => {
        this.$message.success('删除成功')
        this.$refs['wise-crud'].handleSearch(1)
      })
    }
  }
}
</script>

<style>
</style>
